今天要刪除功能實踐,廢話不多說直接開始。
新增this.props.onItemClick把ID傳給父組件統一處理。
handleClick = (e) => {
console.log(e.target.id); //抓到btn當前ID
//實際上呼叫的是由上層元件從props.onItemClick傳入的方法(上層元件的方法)
this.props.onItemClick(e.target.id);//傳給父組件處理拿到要刪除的索引值
}
把昨天單獨拿出來的地方,現在合併起來了。
render() {
const {searhItem,handleContent,addItem,deleteItem} = this,
{content,item} = this.state;
return(
<div>
<label>文字輸入</label>
<input type="text"
placeholder="addItem..."
value={content}
onChange={handleContent}
/>
<button onClick={addItem}>addItem</button>
<br/>
<Searchbar onsearh ={searhItem}/> {/* 從子組件 接收onsearh事件 */}
<Todolist item={item} onItemClick={deleteItem} />
</div>
);
}
}
這個k,是從Todolist.js的handleClick函數傳裡的ID,我們把ID抓取後拿來山陣列資料,
這樣就可以實現刪除功能。
deleteItem = (k) =>{ //傳進當前按鈕按下後的索引值
console.log('k',this.state.item[k]); //拿到陣列的值
// delete this.state.item[k];
this.state.item.splice(k, 1);// 刪除1筆 資料 splice(當前索引,刪幾筆)
console.log('刪除陣列裡當前索引值的資料',this.state.item);
this.setState({
item:this.state.item,//改變陣列
searhitem:this.state.item
})
}
參考資料:自己